<template>
  <div class="personal-center">
    <div class="user-info">
      <div class="header">
        <div class="h-left">
          <el-avatar :size="70" :src="userStore.userInfo.avatarUrl" />
          <div class="side">
            <el-input
              class="nickname"
              placeholder="输入昵称"
              v-model="fmData.nickname"
              @change="nickChange"
            ></el-input>
            <div class="grade">
              <span>等级：</span>
              <div class="grade-content">
                <img
                  style="width: 24px; height: 24px"
                  src="@/assets/image/index/grade.png"
                  alt=""
                />
                <span class="grade-text">{{
                  userStore.userInfo.stuGradeTitle
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <el-button @click="logOut">退出登录</el-button>
      </div>

      <div>
        <p
          style="
            margin: 15px 0;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          "
        >
          账号信息
        </p>
        <p style="margin-bottom: 10px">
          用户名：{{ userStore.userInfo.userName }}
        </p>
        <p style="margin-bottom: 10px">
          学员号：{{ userStore.userInfo.stuId }}
        </p>
        <p>手机号：{{ userStore.userInfo.mobile }}</p>
      </div>
    </div>

    <el-collapse
      style="margin-top: 15px; border-radius: 10px; overflow: hidden"
    >
      <el-collapse-item name="1">
        <template #title>
          <span
            style="
              margin-left: 15px;
              font-size: 20px;
              font-weight: bold;
              color: #000;
            "
          >
            修改密码
          </span>
        </template>
        <div class="update-box">
          <el-form :inline="true" :model="fmData" :rules="rules" ref="formRef">
            <el-form-item label="原密码" prop="oldPwd">
              <el-input
                class="input-width"
                v-model="fmData.oldPwd"
                placeholder="请输入原密码"
                clearable
              />
            </el-form-item>

            <el-form-item label="新密码" prop="pwd">
              <el-input
                class="input-width"
                v-model="fmData.pwd"
                placeholder="请输入新密码"
                clearable
              />
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPwd">
              <el-input
                class="input-width"
                v-model="fmData.confirmPwd"
                placeholder="再次确认密码"
                clearable
              />
            </el-form-item>
          </el-form>

          <div style="display: flex; justify-content: center; margin-top: 20px">
            <el-button color="#df4138" @click="handleUpdate" :loading="loading">
              确认修改
            </el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { reactive, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { updateInfo } from "@/service/user";

const userStore = useUserStore();
const formRef = ref(null);
const fmData = reactive({
  nickname: userStore.userInfo.nickname,
  oldPwd: "",
  pwd: "",
  confirmPwd: "",
});

const checkPwd = (rule: any, value: any, callback: any) => {
  if (fmData.pwd !== fmData.confirmPwd) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};

const loading = ref(false);

const rules = {
  oldPwd: {
    required: true,
    message: "请输入原密码",
    trigger: "change",
  },
  pwd: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "change",
    },
    {
      min: 5,
      max: 20,
      message: "用户密码长度必须介于 5 和 20 之间",
      trigger: "change",
    },
    {
      pattern: /^[^<>"'|\\]+$/,
      message: "不能包含非法字符：< > \" ' \\\ |",
      trigger: "change",
    },
  ],
  confirmPwd: [
    {
      trigger: "change",
      validator: checkPwd,
    },
  ],
};

async function logOut() {
  await ElMessageBox.confirm("确定退出登录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  await userStore.loginOut();
  userStore.clearUserInfo();
  userStore.backLogin();
}

async function nickChange() {
  await updateInfo({ type: 1, nickName: fmData.nickname });
  ElMessage.success("昵称修改成功");
  userStore.studentInfo(); // 重新获取用户信息
}

async function handleUpdate() {
  await formRef.value?.validate();
  try {
    loading.value = true;
    await updateInfo({
      type: 2,
      oldPassword: fmData.oldPwd,
      newPassword: fmData.pwd,
    });
    loading.value = false;
    fmData.oldPwd = "";
    fmData.pwd = "";
    fmData.confirmPwd = "";
    ElMessage.success("密码修改成功");
    userStore.studentInfo(); // 重新获取用户信息
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
}
</script>

<style scoped lang="scss">
.personal-center {
  flex: 1;
  padding: 20px;

  .user-info {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .h-left {
        display: flex;
        align-items: center;

        .side {
          margin-left: 15px;

          .grade {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .grade-content {
              position: relative;
              .grade-text {
                position: absolute;
                color: #fff;
                font-size: 14px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
    }
  }

  .update-box {
    background-color: #fff;
    padding: 20px;
  }

  .input-width {
    width: 220px;
  }
}
</style>
